<template>
	<view class="userinfo">
		<!-- <up-sticky :offset-top="statusBarHeight" v-if="apply">
			<up-notice-bar :text='`报名成功后，请在"个人中心"-"报名材料"中上传报名材料`'></up-notice-bar>
		</up-sticky> -->
		<view class="userinfo-top">
			<view class="info">
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="userInfo.avatarUrl" mode="widthFix"></image>
				</button>
				<navigator v-if="!token" url="/pages/login/login" class="name">
					<text>登录/注册</text>
				</navigator>
				<view v-else class="name">
					<text>{{ userInfo.nickname }}</text>
				</view>
			</view>
			<!-- <view class="userinfo-more">
				<view class="project">
					<view class="iconfont icon-gongzhongxifen">
					</view>
					<text style="flex: 1;">熔化焊接与热切割作业</text>
					<text @click="navigateToExamResults" class="link">切换工种</text>
				</view>
				<view class="vip">
					<view class="iconfont icon-wodeVIP">
					</view>
					<text style="flex: 1;">开通会员，获取高级功能</text>
					<text class="link">去看看</text>
				</view>
			</view> -->
		</view>
		<view class="record-body">
			
			<view v-if="userInfo.teacher">
				<view class="order-status">
					<view class="status-list">
						<view class="status-item" v-for="(item, index) in teacherList" :key="index"
							@click="teacherClick(item.type)">
							<view class="status-icon">
								<text class="iconfont" :class="item.icon"></text>
								<text v-if="item.count > 0" class="badge">{{ item.count }}</text>
							</view>
							<text class="status-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="order-status">
					<view class="status-list">
						<view class="status-item" v-for="(item, index) in orderStatus" :key="index"
							@click="navigateToOrder(item.type)">
							<view class="status-icon">
								<text class="iconfont" :class="item.icon"></text>
								<text v-if="item.count > 0" class="badge">{{ item.count }}</text>
							</view>
							<text class="status-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="userinfo-list">
			<!-- <view class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-wodeVIP"></view>
					<text>会员激活</text>
				</view>
				<view class="rt">
					<text class="txt">未激活</text>
					<view class="iconfont icon-erjiyemianjiantou01"></view>
				</view>
			</view> -->
			<!-- <view @click="navigateToOrder" class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-quanbudingdan"></view>
					<text>报考工种</text>
				</view>
				<view class="rt" style="justify-content: flex-end;">
					<text class="txt" style="color: #FD3523;" v-if="count > 0">{{ count }}</text>
					<view class="iconfont icon-erjiyemianjiantou01"></view>
				</view>
			</view> -->
			<!-- <view @click="bindPickerOpc" class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-chengjidan1"></view>
					<text>我的成绩单</text>
				</view>
				<view class="rt">
					<text class="txt"></text>
					<view class="iconfont icon-erjiyemianjiantou01"></view>
				</view>
			</view> -->


			<view @click="phoneSwitch" class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-shoujihaoma"></view>
					<text>手机号码</text>
				</view>
				<view class="rt">
					<text class="txt">{{ userInfo.phone }}</text>
					<view class="iconfont icon-erjiyemianjiantou01"></view>
				</view>
			</view>
			<navigator :render-link="false" url="/pages/profile/profile" class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-shenfenzhenghao"></view>
					<text>报名材料</text>
				</view>
				<view class="rt">
					<text class="txt">{{ userInfo.cardPicA && userInfo.cardPicB ? '已上传' : '未上传' }}</text>
					<view class="iconfont icon-erjiyemianjiantou01"></view>
				</view>
			</navigator>
			<!-- <view class="userinfo-list-item">
				<view class="lf">
					<view class="iconfont icon-zhengshuyanzhen"></view>
					<text>证书查询</text>
				</view>
				<view class="iconfont icon-erjiyemianjiantou01"></view>
			</view> -->
			<button open-type="contact" class="userinfo-list-item userinfo-list-btn">
				<view class="lf">
					<view class="iconfont icon-kefu"></view>
					<text>客服</text>
				</view>
				<view class="iconfont icon-erjiyemianjiantou01"></view>
			</button>

			<up-button type="error" :custom-style="{marginTop: '20rpx'}" class="out-login" @click="outLogin">退出登录</up-button>
		</view>
		<up-popup ref="popupLogin" :show="popupUserInfoShow" :closeOnClickOverlay="false" mode="bottom" @close="popupUserInfoShow = false" closeable
			:round="'30rpx'">
			<view class="login-box">
				<view class="login-box-title">
					<text class="slogan">请完善头像</text>
					<text class="slogan2">请上传头像</text>
				</view>

				<!-- 步骤指示器 - 只显示未完成的步骤 -->
				<view class="step-indicator">
					<view class="step-item active">
							<text class="step-number">1</text>
							<text class="step-text">点击上传头像</text>
						</view>
				</view>
				<view class="login-userinfo">
					<!-- 头像设置步骤 -->
					<view v-if="currentStep === 'avatar' && !userinfo.avatar" class="step-content">
						<button class="avatar-btn btndefault"
							:class="{ 'shake-element': isAvatarShaking, 'disabled': isUploading }"
							open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<view class="avatar">
								<view v-if="!userinfo.avatar" class="iconfont icon-zhaoxiangji"></view>
								<image v-else :src="userinfo.avatar" mode="aspectFit"></image>
							</view>
							<text>点击设置头像</text>
						</button>
					</view>

					<!-- 昵称设置步骤 -->
					<view v-if="currentStep === 'nickname' && !userinfo.nickname" class="step-content">
						<view class="login-nickname" :class="{ 'shake-element': isNicknameShaking }">
							<text>昵称 </text>
							<input type="nickname" :value="userinfo.nickname" @blur="nickBlur" placeholder="请输入昵称" />
						</view>
						<button class="wxlogin btndefault" @click="handleNextStep" :disabled="!userinfo.nickname">
							{{ currentBtnText }}
						</button>
					</view>
				</view>
			
			</view>
		</up-popup>
		
	</view>
</template>

<script>
	import {
		getDetail,
		getDayTotal,
		getTPScore,
		putUserUpdate
	} from '@/http/user.js'
	import {
		parseTime
	} from '@/utils/tools.js'

	export default {
		data() {
			return {
				avatarUrl: 'https://img.qiananquang.com/minapp/avatar.png',
				userInfo: {},
				orders: [],
				apply: false,
				count: '',
				teacherList: [{
						name: '扫码审核',
						icon: 'icon-shouye1',
						type: '0',
					},
					{
						name: '班级管理',
						icon: 'icon-banjiguanli',
						type: '1',
					},
					{
						name: '学员管理',
						icon: 'icon-yishenhe',
						type: '2',
					}
				],
				data: {},
				opcList: [],
				statusBarHeight: 0,
				parseTime,
				scanResult: null,
				token: null,
				popupUserInfoShow: false,
				currentStep: 'avatar',
				isAvatarShaking: false,
				isNicknameShaking: false,
				isUploading:false,
				userinfo: {
					avatar: '',
					nickname: '',
				}
			};
		},
		computed: {
		// 计算当前步骤的按钮文本
		currentBtnText() {
			switch (this.currentStep) {
				case 'phone': return '微信一键绑定'
				case 'avatar': return '设置头像'
				case 'nickname': return '完成'
				default: return '完成'
			}
		},
		// 是否显示下一步按钮
		showNextBtn() {
			switch (this.currentStep) {
				case 'phone': return !!this.userinfo.phone
				case 'avatar': return !!this.userinfo.avatar
				case 'nickname': return !!this.userinfo.nickname
				default: return true
			}
		},
		// 检查用户信息是否完整
		isUserInfoComplete() {
			return !!(this.userinfo && this.userinfo.phone && this.userinfo.avatar && this.userinfo.nickname)
		}
	},
		onShow() {
			this.onUserData()
			this.loadConfig()
			this.token = uni.getStorageSync('token')
				if (!this.token) {
			return uni.showModal({
				title: '请登录',
				content: '请先登录，登录后才能操作',
				confirmText: '去登录',
				confirmColor: '$uni-color-primary',
				cancelText: '取消',
				cancelColor: '#666',
				success: (e) => {
					if (e.confirm) {
						uni.navigateTo({
							url: '/pages/login/login',
							complete: () => {
							}
						})
					} else {
						uni.switchTab({
							url: '/pages/index/index',
							success: () => {
							}
						})
					}
				}
			})
		}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			loadConfig() {
				getDayTotal().then(res => {
					this.data = res.data
				})
			},
			navigateToExamResults() {


			},
			bindPickerOpc(e) {
				uni.showActionSheet({
					itemList: this.opcList.map(item => item.title),
					success: (res) => {
						let opc = this.opcList[res.tapIndex]
						getTPScore({
							opc: opc.opc
						}).then(res => {
							let dayTime = new Date().getTime()

							if (res.data == null || dayTime <= res.data?.theoryTime || res.data
								?.theoryScore == '') {
								uni.showToast({
									title: '理论考试未出成绩',
									icon: 'none'
								})
								return
							}
							uni.setStorageSync('tpScore', res.data)
							uni.navigateTo({
								url: '/pages/userInfo/examResults?opc=' + opc.opc +
									'&opcname=' + opc.title
							})
						})
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			phoneSwitch() {
				this.onUserData().then(() => {
					if (this.userInfo.phone == '') {
						uni.navigateTo({
							url: '/pages/login/phone'
						})
					} else {
						uni.showModal({
							title: '确认更换手机号？',
							content: `更换后现手机号${this.userInfo.phone}将不能用于登录`,
							cancelText: '确认更换',
							confirmText: '我再想想',
							success: (res) => {
								if (res.confirm) {
									console.log('用户取消更换');
								} else if (res.cancel) {
									uni.navigateTo({
										url: '/pages/login/phone'
									})
								}
							}
						})
					}
				}).catch(err => {
					console.error('获取用户信息失败:', err)
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				})

			},
			onUserData() {
				return getDetail().then(res => {
					uni.setStorageSync('userinfo', res.data)
					this.userInfo = {
						...res.data,
						phone: res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
						identity: res.data.identity.replace(/(\d{6})\d{6}(\d{4})/, '$1****$2'),
						avatarUrl: res.data.avatar
					}
					this.opcList = res.data.courses
					this.orders = res.data.orders || []
					this.apply = (res.data.regFrom == '自行注册' && (res.data.cardPicB == '' || res.data.cardPicA == ''))
					this.count = this.orders.filter(order => order.paymentStatus === 0).length
					if(this.userInfo.avatar == ''){
						this.popupUserInfoShow = true
					}
					return res.data
				}).catch(err => {
					this.userInfo = {}
					console.error('获取用户信息失败:', err)
					return Promise.reject(err)
				})

			},
			async onChooseAvatar(val) {
				// 1. 获取微信头像临时路径
				const tempFilePath = val.detail.avatarUrl;
				if (!tempFilePath) {
					uni.showToast({ title: '获取头像失败', icon: 'none' });
					return;
				}
				try {
					// 2. 上传图片到服务器
					const uploadRes = await this.uploadAvatar(tempFilePath);
					// 假设 uploadFile 返回 { url: 'https://xxx/xxx.png' }
					const avatarUrl = uploadRes.url;
					if (!avatarUrl) throw new Error('上传失败');
					// 3. 更新用户信息
					await putUserUpdate({ avatar: avatarUrl });
					// 4. 更新本地 userInfo
					this.userInfo.avatarUrl = avatarUrl;
					this.popupUserInfoShow = false
					uni.showToast({ title: '头像更新成功', icon: 'success' });
				} catch (err) {
					console.error('头像上传或更新失败', err);
					uni.showToast({ title: '头像上传失败', icon: 'none' });
				}
			},
			// 上传头像
		uploadAvatar(filePath) {
			return new Promise((resolve) => {
				uni.uploadFile({
					url: 'https://api.liangxibao.com/aliyun/oss/uploadFile',
					filePath: filePath,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
						'Content-Type': 'multipart/form-data'
					},
					success: ({ data, statusCode }) => {
						console.log('上传响应:', { data, statusCode })
						try {
							const result = JSON.parse(data)
							if (result.code === 200 && result.data) {
								resolve({
									success: true,
									url: result.data
								})
							} else {
								resolve({
									success: false,
									error: result.message || '上传失败'
								})
							}
						} catch (e) {
							console.error('解析响应失败:', e)
							resolve({
								success: false,
								error: '响应格式错误'
							})
						}
					},
					fail: (error) => {
						console.error('上传请求失败:', error)
						resolve({
							success: false,
							error: error.errMsg || '网络请求失败'
						})
					}
				})
			})
		},
			teacherClick(val) {
				switch (val) {
					case '0':
						this.scanCode()
						break;
					case '1':
						uni.navigateTo({
							url: '/pages/teacher/itemList'
						})
						break;
					case '2':
						break;
					case '3':
						break;
					case '4':
						break;
				}
			},
			navigateToOrder() {
				uni.navigateTo({
					url: `/pages/order/list`
				})
			},
			navigateToExamResults() {

			},
			scanCode() {
				uni.scanCode({
					scanType: ['qrCode'],
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫码结果:', res)
						this.handleScanResult(res.result)
					},
					fail: (error) => {
						console.error('扫码失败:', error)
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			},
			outLogin() {
				
				uni.showModal({
					title: '退出登录',
					content: '确认要退出登录吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							try {
								// 清除所有存储的数据
								uni.clearStorageSync()
								
								// 重置用户信息
								this.userInfo = {}
								
								// 跳转到登录页面
								uni.reLaunch({
									url: '/pages/login/login',
									success: () => {
										uni.showToast({
											title: '已退出登录',
											icon: 'success'
										})
									},
									fail: (err) => {
										console.error('跳转登录页面失败:', err)
										uni.showToast({
											title: '跳转失败，请重试',
											icon: 'none'
										})
									}
								})
							} catch (err) {
								console.error('退出登录失败:', err)
								uni.showToast({
									title: '退出失败，请重试',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			handleScanResult(result) {
				try {
					const parseUrlParams = (url) => {
						const paramsStr = url.split('?')[1] || ''
						const params = {}
						if (paramsStr) {
							paramsStr.split('&').forEach(item => {
								const [key, value] = item.split('=')
								params[key] = decodeURIComponent(value || '')
							})
						}
						return params
					}

					const queryString = result.split('#')[1] || result
					const params = parseUrlParams(queryString)

					const formattedParams = {
						studentId: params.studentId,
						courseId: params.courseId,
						chapterId: params.chapterId
					}

					console.log('解析后的参数:', formattedParams,params)

					if (!formattedParams.courseId) {
						throw new Error('无效的二维码类型')
					}
					uni.navigateTo({
						url: `/pages/time/checkUser?studentId=${params.studentId}&courseId=${params.courseId}${params.chapterId ? `&chapterId=${params.chapterId}` : ''}`
					})

				} catch (error) {
					console.error('处理扫码结果失败:', error)
					uni.showToast({
						title: error.message || '无效的二维码格式',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
		// height: 100%;
		// --status-bar-height: var(--status-bar-height);
	}

	.userinfo {
		background: $uni-gradient-primary;
		background-size: 100% 328rpx;
		background-repeat: no-repeat;

		.userinfo-top {
			padding: 80rpx 30rpx 30rpx 30rpx;

			.info {
				display: flex;
				align-items: center;
			}

			.avatar {
				width: 125rpx;
				height: 125rpx;
				background: #FFD4D0;
				border-radius: 50%;
				border: 6rpx solid #ffffff;
				padding: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				color: #fff;
				font-size: 38rpx;
				color: #FFFFFF;

				.iconfont {
					font-size: 36rpx;
					// padding-left: 10rpx;
				}

				.icon {
					font-size: 24rpx;
					padding-left: 10rpx;
					display: flex;
					align-items: center;
				}

				.type {
					padding: 10rpx 0;
					display: flex;
					align-items: center;
				}
			}

			.userinfo-more {
				border-radius: 20rpx;
				margin-top: 20rpx;
				overflow: hidden;
				box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(230, 140, 140, 0.27);
			}

			.project {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				background: $uni-gradient-primary;

				text {
					font-weight: 400;
					font-size: 30rpx;
					color: #030608;
				}

				.iconfont {
					font-size: 46rpx;
					color: #502F1E;
					margin-right: 15rpx;
					width: 60rpx;
					text-align: center;
				}

				.link {
					color: #502F1E;
					background: $uni-gradient-primary;
					border-radius: 26rpx;
					width: 164rpx;
					height: 53rpx;
					font-weight: 600;
					font-size: 28rpx;
					text-align: center;
					line-height: 53rpx;
				}
			}

			.vip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: $uni-gradient-primary;
				border-radius: 0 0 20rpx 20rpx;
				padding: 20rpx 30rpx;
				margin-top: 2rpx;

				text {
					font-weight: 400;
					font-size: 30rpx;
					color: #030608;
				}

				.iconfont {
					font-size: 56rpx;
					color: #e23321FF;
					margin-right: 15rpx;
					width: 60rpx;
					text-align: center;
				}

				.link {
					background: $uni-gradient-primary;
					border-radius: 26rpx;
					width: 164rpx;
					height: 53rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 53rpx;
				}
			}
		}
	}

	.userinfo-list {
		margin: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.userinfo-list-btn {
			line-height: normal;
			margin: 0;
			background: none;
			color: initial;
			border: none;
			background-color: transparent;
			/* 透明背景 */
			padding: 0;
			/* 清除内边距 */
			margin: 0;
			/* 清除外边距 */
			line-height: normal;
			/* 重置行高 */
			border-radius: 0;
			/* 清除圆角 */
			&:after{
				  border: none;
				  background-color: transparent;
			}
		}

		.userinfo-list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 0 30rpx;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: 2rpx solid #c9c9c9;

			&:last-child {
				border: none
			}

			.txt {
				flex: 1;
				text-align: left;
			}

			.lf {
				display: flex;
				align-items: center;

				.iconfont {
					width: 60rpx;
					line-height: 60rpx;
					color: #c9c9c9;
					text-align: center;
				}

				.icon-wodeVIP {
					font-size: 60rpx;
				}

				.icon-quanbudingdan {
					font-size: 52rpx;
					text-align: center;
				}

				.icon-shoujihaoma {
					font-size: 52rpx;
					text-align: center;
				}

				.icon-shenfenzhenghao {
					font-size: 48rpx;
				}

				.icon-erjiyemianjiantou01 {
					font-size: 36rpx;
				}

				.icon-chengjidan1 {
					font-size: 46rpx;
				}

				.icon-zhengshuyanzhen {
					font-size: 58rpx;
				}

				.icon-kefu {
					font-size: 50rpx;
				}

				text {
					padding-left: 20rpx;

				}
			}

			.rt {
				flex: 1;
				display: flex;
				align-items: center;

				.txt {
					text-align: right;
					padding-right: 8rpx;
					color: #c9c9c9;
				}
			}


		}
	}

	.record-mind {
		margin: 0 30rpx;
		box-shadow: 1rpx 2rpx 20rpx 1rpx rgba(97, 69, 65, 0.1);
		border-radius: 20rpx 20rpx;
		background: #FFFFFF;

		.record-mind-nav {
			background: #383131;
			border-radius: 20rpx 20rpx 0 0;
			height: 92rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			overflow: hidden;

			text {
				flex: 1;
				text-align: center;
				line-height: 92rpx;
				position: relative;

				// border-radius: 20rpx 20rpx 0 0;
				&:first-child {
					border-bottom-left-radius: 0;
				}

				&:last-child {
					// &:before {
					// 	right: 0rpx;
					// 	left: -20rpx;
					// 	border-left: 36rpx solid transparent;
					// 	border-right: 0rpx solid transparent;
					// 	border-bottom: 36rpx solid #E94030;

					// }
					border-bottom-right-radius: 0;
				}
			}

			.on {
				background-color: #E94030;

				// &:before {
				// 	content: '';
				// 	position: absolute;
				// 	right: -20rpx;
				// 	bottom: 0;
				// 	width: 0;
				// 	height: 0;
				// 	border-left: 0px solid transparent;
				// 	border-right: 36rpx solid transparent;
				// 	border-bottom: 36rpx solid #E94030;
				// }
			}
		}

		.record-mind-data {
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			position: relative;

			.share {
				font-size: 26rpx;
				width: 110rpx;
				height: 56rpx;
				border-radius: 40rpx 0 0 40rpx;
				background: #E94030;
				color: #fff;
				position: absolute;
				right: 0;
				top: 28rpx;
				text-align: center;
				line-height: 56rpx;
			}

			.record-mind-data-title {
				font-weight: 700;
				font-size: 30rpx;
				color: #0E0E10;
				display: block;
				padding: 35rpx 0;
			}

			.record-mind-data-list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);

				// gap: 5px;
				.record-mind-data-item {
					position: relative;
					padding-bottom: 50rpx;

					&:nth-child(4n) {
						&:before {
							display: none;
						}
					}

					&:before {
						content: '';
						position: absolute;
						right: 0;
						width: 2rpx;
						height: 68rpx;
						background: #d0d0d0;
						top: 20%;
						// transform: translate(0,-50%);
					}

					text {
						display: block;
						text-align: center;
						font-weight: 400;
						font-size: 26rpx;
						color: #1E1E20;
					}

					.num {
						font-weight: 500;
						font-size: 40rpx;
						color: #1E1E20;
						padding-bottom: 15rpx;
					}
				}
			}
		}

	}



	.order-status {
		background: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;

		.status-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.more {
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;

				.icon-arrow-right {
					font-size: 24rpx;
					margin-left: 4rpx;
				}
			}
		}

		.status-list {
			display: flex;
			justify-content: space-between;

			.status-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.status-icon {
					position: relative;
					margin-bottom: 10rpx;

					.iconfont {
						font-size: 48rpx;
						color: #FD3523;
					}

					.badge {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background: #ff4d4f;
						color: #fff;
						font-size: 20rpx;
						// padding: 0 3rpx;
						border-radius: 20rpx;
						min-width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
					}
				}

				.status-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	.out-login{
		background: linear-gradient(135deg, #3073f6, #4a90e2);
		border:none
	}

	::v-deep .avatar-btn {
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: transparent;

	&::after {
		border: none;
		background: transparent;
	}
}

.login-box {
	background: linear-gradient(180deg, #B4CDF8, rgba(239,243,250,0));
	background-size: 100% 345rpx;
	background-repeat: no-repeat;
	background-color: #F7F6F9;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0 120rpx 0;
	position: relative;

	.login-box-title {
		text-align: center;
		margin-bottom: 40rpx;

		text {
			display: block;
		}

		.slogan {
			font-weight: 700;
			font-size: 46rpx;
			color: #2C2821;
			margin-bottom: 16rpx;
		}

		.slogan2 {
			font-weight: 400;
			font-size: 30rpx;
			color: #4460E5;
		}
	}

	.step-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
		padding: 0 60rpx;
		width: 100%;
		box-sizing: border-box;

		.step-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			flex: 0 0 auto;

			.step-number {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #e0e0e0;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				margin-bottom: 12rpx;
				transition: all 0.3s ease;
			}

			.step-text {
				font-size: 26rpx;
				color: #999;
				transition: all 0.3s ease;
			}

			&.active {
				.step-number {
					background: #4460E5;
					transform: scale(1.1);
					box-shadow: 0 4rpx 12rpx rgba(252, 56, 38, 0.2);
				}

				.step-text {
					color: #4460E5;
					font-weight: 500;
				}
			}

			&.completed {
				.step-number {
					background: #04C051;
					box-shadow: 0 4rpx 12rpx rgba(4, 192, 81, 0.2);
				}

				.step-text {
					color: #04C051;
					font-weight: 500;
				}
			}

			&.hidden {
				display: none;
			}
		}

		.step-line {
			flex: 1;
			height: 2rpx;
			background: #e0e0e0;
			margin: 0 20rpx;
			margin-bottom: 36rpx;
			transition: all 0.3s ease;

			&.active {
				background: #04C051;
				height: 3rpx;
			}

			&.hidden {
				display: none;
			}
		}
	}

	.login-userinfo {
		margin-top: 40rpx;
		width: 100%;
		padding: 0 60rpx;
		box-sizing: border-box;

		.login-btn {
			margin-top: 40rpx;

			.btndefault {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-bottom: 30rpx;
				background: #04C051;
				transition: all 0.3s ease;
				box-shadow: 0 6rpx 20rpx rgba(4, 192, 81, 0.2);

				&:active {
					transform: scale(0.98);
					box-shadow: 0 4rpx 12rpx rgba(4, 192, 81, 0.15);
				}

				&.wxlogin {
					background: linear-gradient(135deg, #04C051, #03A745);
				}

				&[disabled] {
					background: #ccc;
					box-shadow: none;
				}
			}
		}

		.step-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 0;

			.avatar-btn {
				background: transparent;
				border: none;
				padding: 0;
				margin: 0;
				transition: all 0.3s ease;

				&::after {
					display: none;
				}

				&:active {
					transform: scale(0.98);
				}

				&.disabled {
					opacity: 0.7;
				}

				.avatar {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					background: linear-gradient(135deg, #4460E5, #6B98F9);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 24rpx;
					overflow: hidden;
					box-shadow: 0 6rpx 20rpx rgba(252, 56, 38, 0.2);
					transition: all 0.3s ease;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					.iconfont {
						font-size: 90rpx;
						color: #fff;
					}
				}

				text {
					font-size: 28rpx;
					color: #666;
					margin-top: 12rpx;
				}
			}

			.login-nickname {
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 4rpx solid #e7e7e7;
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				padding: 20rpx 0;
				transition: all 0.3s ease;

				&:focus-within {
					border-color: #4460E5;
				}

				text {
					font-weight: 500;
					font-size: 30rpx;
					color: #2C2821;
				}

				input {
					margin-left: 20rpx;
					flex: 1;
					font-size: 30rpx;
					color: #333;
				}
			}
		}
	}

	.agreement-box {
	position: fixed;
	left: 50%;
	bottom: 40rpx;
	transform: translateX(-50%);
	font-weight: 600;
	font-size: 24rpx;
	color: #A5A5A5;
	text-align: center;
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;

	.custom-checkbox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		cursor: pointer;

		.checkbox-icon {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #A5A5A5;
			border-radius: 50%;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;

			&.checked {
				background: #fff;
				border-color: #4460E5;
			}

			.icon-check {
				color: #fff;
				font-size: 24rpx;
			}
		}

		.agreement-txt {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.agreement {
			color: #4460E5;
		}
	}
}

}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-8rpx);
	}

	75% {
		transform: translateX(8rpx);
	}
}

.shake-element {
	animation: shake 0.5s ease-in-out;
}

::v-deep .avatar-btn {
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: transparent;

	&::after {
		border: none;
		background: transparent;
	}
}

.switch-btn {
	background: #fff;
	color: #4460E5;
	border: 2rpx solid #4460E5;
	border-radius: 40rpx;
	font-size: 26rpx;
	margin-bottom: 30rpx;
	transition: background 0.2s, color 0.2s;
	box-shadow: 0 2rpx 8rpx rgba(252,56,38,0.08);
}
.switch-btn:active {
	background: #4460E5;
	color: #fff;
}

.btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	.recommend-tag {
		position: relative;
		margin-left: 8rpx;
		background: #4460E5;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 2rpx 8rpx;
		border-radius: 12rpx;
		font-size: 20rpx;
		font-weight: normal;
		transform: scale(0.8);
		transform-origin: left center;
		box-shadow: 0 2rpx 4rpx rgba(253, 53, 35, 0.2);
	}
}
</style>